<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中城捷运访客系统</title>
    <link rel="shortcut icon" th:href="@{/public/img/crrc2.png}"/>
    <link th:href="@{/public/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/public/font-awesome/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/public/css/plugins/iCheck/custom.css}" rel="stylesheet">
    <link th:href="@{/public/css/animate.css}" rel="stylesheet">
    <link th:href="@{/public/css/style.css}" rel="stylesheet">
    <link th:href="@{/public/css/jquery-confirm.min.css}" rel="stylesheet">
    <link th:href="@{/public/js/fileinput_locale_zh.js}"/>
    <script th:src="@{/public/js/axios.min.js}"></script>
    <!--<script th:src="@{/admin/tbvisitor/js/index.js}"></script>-->
    <script th:src="@{/public/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/public/js/tracking-min.js}"></script>
    <script th:src="@{/public/js/face-min.js}"></script>
    <script th:src="@{/public/js/eye-min.js}"></script>
    <script th:src="@{/public/js/mouth-min.js}"></script>
</head>
<body>

<div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="profile-element" style="margin-bottom:20px;"> <span>
                        <img alt="image" th:src="@{/public/img/crrc-logo.png}" />
                         </span>

                    </div>
                    <div class="dropdown profile-element"> <span>
                            <img alt="image" class="img-circle" th:src="@{/public/img/profile_small.jpg}" />
                             </span>
                    </div>
                    <div class="logo-element">
                        <img alt="image" style="width:60px;height:60px;" th:src="@{/public/img/crrc2.png}" />
                    </div>
                </li>
                <li>
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">访客登记</span> <span class="fa arrow"></span></a>
                </li>


            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                    <form role="search" class="navbar-form-custom" action="search_results.html">
                        <div class="form-group">

                        </div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <span class="m-r-sm text-muted welcome-message">中城捷运访客登记平台</span>
                    </li>
                    <li class="dropdown">

                        <ul class="dropdown-menu dropdown-messages">
                            <li>
                                <div class="dropdown-messages-box">
                                    <div class="media-body">
                                        <small class="pull-right">46h ago</small>
                                        <strong>Mike Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
                                        <small class="text-muted">3 days ago at 7:58 pm - 10.06.2014</small>
                                    </div>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="dropdown-messages-box">

                                    <div class="media-body ">
                                        <small class="pull-right text-navy">5h ago</small>
                                        <strong>Chris Johnatan Overtunk</strong> started following <strong>Monica Smith</strong>. <br>
                                        <small class="text-muted">Yesterday 1:21 pm - 11.06.2014</small>
                                    </div>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="dropdown-messages-box">
                                    <div class="media-body ">
                                        <small class="pull-right">23h ago</small>
                                        <strong>Monica Smith</strong> love <strong>Kim Smith</strong>. <br>
                                        <small class="text-muted">2 days ago at 2:30 am - 11.06.2014</small>
                                    </div>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="text-center link-block">
                                    <a href="mailbox.html">
                                        <i class="fa fa-envelope"></i> <strong>Read All Messages</strong>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <ul class="dropdown-menu dropdown-alerts">
                            <li>
                                <a href="mailbox.html">
                                    <div>
                                        <i class="fa fa-envelope fa-fw"></i> You have 16 messages
                                        <span class="pull-right text-muted small">4 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="profile.html">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                        <span class="pull-right text-muted small">12 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="grid_options.html">
                                    <div>
                                        <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                        <span class="pull-right text-muted small">4 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="text-center link-block">
                                    <a href="notifications.html">
                                        <strong>See All Alerts</strong>
                                        <i class="fa fa-angle-right"></i>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>


                    <li>
                        <a href="/publics/visitor/index">
                            <i class="fa fa-sign-out"></i> 退出
                        </a>
                    </li>
                </ul>

            </nav>
        </div>
        <div class="row wrapper page-heading">
            <div class="col-lg-10">
                <h2>访客登记</h2>
                <ol class="breadcrumb">
                    <!-- <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a>Forms</a>
                    </li>
                    <li class="active">
                        <strong>Basic Form</strong>
                    </li> -->
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <!-- 主要内容 -->
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5 style="margin:0;padding-top:10px;">人脸抓拍 </h5>
                            <div class="ibox-tools">
                                <a class="step-link">
                                    <span class="step-number step-red">1</span>
                                    <span class="step-word text-red">填写信息</span>
                                    <span class="step-arrow text-red"><i class="fa fa-angle-right"></i></span>
                                </a>
                                <a class="step-link">
                                    <span class="step-number step-red">2</span>
                                    <span class="step-word text-red">抓拍人脸</span>
                                    <span class="step-arrow text-red"><i class="fa fa-angle-right"></i></span>
                                </a>
                                <a class="step-link">
                                    <span class="step-number step-gray">3</span>
                                    <span class="step-word text-gray">已完成</span>

                                </a>
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">

                                <div class="col-sm-3">
                                    <h4>实时画面</h4>
                                    <!--<video id="video" class="video" width="100%" height="400px"></video>-->
                                    <video id="video" width="100%" height="400" preload autoplay loop muted></video>
                                    <!-- 用于给video标签截图的画布 -->
                                    <canvas id="canvas" width="200" height="300" style="display:none;"></canvas>
                                    <!--</div>-->

                                    <!--</div>-->
                                    <input type="submit" class="btn btn-lg btn-info pull-left" th:value="重置"  onclick="indexObjs.updateImg()"></input>
                                    <div style="clear:both"></div>
                                </div>
                                <div class="col-sm-9">
                                    <div class="row col-sm-12">
                                        <h4>抓拍结果</h4>
                                        <div id="page" class="capturing-imgBox m-b">
                                            <div id="face2">
                                                <canvas id="canvas1" width="200" height="250" style="display:none;border:1px solid #f00;"></canvas>
                                            </div>
                                        </div>
                                        </form>
                                    </div>
                                    <div class="row col-sm-12">
                                        <h4>抓拍规范</h4>
                                        <div class="capturing-standard">
                                            <img th:src="@{/public/img/standard.png}"/>
                                            <img th:src="@{/public/img/standard-error01.png}"/>
                                            <img th:src="@{/public/img/standard-error01.png}"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed">

                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-lg btn-primary pull-right" onclick="index.buttons()" >提交</button>
                                    <button type="button" class="btn btn-lg btn-default pull-right m-r8" onclick="cancel.cancel()">取消</button>
                                    <div style="clear:both"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 版权 -->
        <div class="footer">
            <div class="pull-right">

            </div>
            <div>
                <strong>Copyright</strong>  中城捷运城市交通有限公司 版权所有 2019
            </div>
        </div>
        <!-- 版权结束 -->
        <!-- 主要内容结束 -->

    </div>
</div>

<script  type="text/javascript" th:inline="javascript">
    var indexObjs = {};
    var index = {};
    var saveArray = {};
    var cancel = {};

    cancel.cancel = function () {
        axios.post("/publics/visitor/cancel")
            .then(function (res) {
                window.location.href = "/publics/visitor/index";
            }).catch(function (error) {

        })
    }

    /**
     * 重新拍照事件响应
     */
    indexObjs.updateImg = function () {
        var img3src = document.getElementById('picture').src;
        if(img3src!=null){
            axios.post("/publics/visitor/delete", {"img": img3src.substring(img3src.lastIndexOf("/") + 1)})
                .then(function (res) {
                    window.location.reload();
                }).catch(function (error) {
                window.location.reload();
            })
        }else{
            alert("照片不可以为空")
        }

    }
    index.buttons = function () {
        axios.post("/publics/visitor/instat")
            .then(function (res) {
                if (res.data.code == 403) {
                    alert("提交失败,请重新拍摄"+res.data.msg)
                    window.location.href = "/publics/visitor/new";
                } else {
                    alert("提交成功");
                    window.location.href = "/publics/visitor/index";
                }

            }).catch(function (error) {

            alert("提交失败,请重新拍摄");
            window.location.href = "/publics/visitor";
        })
    }
    /*<![CDATA[*/
    var ctx = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/
        $(function () {
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var canvas1 = document.getElementById('canvas1');
            var context = canvas.getContext('2d');

            var time =100000;//向后台发照片的冷却时间

            var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
            tracker.setInitialScale(4);
            tracker.setStepSize(2);
            tracker.setEdgesDensity(0.1);
            tracking.track('#video', tracker, { camera: true });
            var flag=true;
            tracker.on('track', function (event) {
                if (event.data.length == 0) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                } else {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    event.data.forEach(function(rect) {
                        context.strokeStyle = '#fff';
                        context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                    });
                    if (flag) {
                        Shoot();
                        flag = false;
                        setTimeout(function () {
                            flag = true;
                        }, time);
                    } else {
                    }
                }
            });
            function Shoot() {
                var trackerTask = tracking.track(video, tracker);
                var context = canvas1.getContext('2d');

                //把当前视频帧内容渲染到画布上
                context.drawImage(video, 0, 5, 200, 250);
                var dom = document.createElement("a");
                dom.href = this.canvas.toDataURL("image/png");
                dom.download = new Date().getTime() + ".png";
                //删除字符串前的提示信息 "data:image/png;base64,"
                var data = canvas1.toDataURL();
                var b64 = data.substring(22);
                if(b64!=null && flag){
                    axios.post("/publics/visitor/upload", {"img": b64})
                        .then(function (res) {
                            if (res.data.img != null) {
                                document.getElementById("page").innerHTML = "<img id='picture' style='width: 150px;height: 200px;' src='http://localhost:8081" + res.data.img + "'>";
                                trackerTask.stop();
                            }
                            alert("拍摄成功,请记得提交,提交如有异常请重新拍摄")
                        }).catch(function (error) {
                        alert("拍摄失败")
                    });
                }
            }
        });
</script>
</body>

</html>
